<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button {
            width: 600px;
            height: 400px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div style="display: flex;flex-direction: column;">
    <button id=vibrate>震动1s</button>
    <button id="btn">打开新页面，5s后会收到新页面返回的数据</button>
    <div style="margin-top: 10px;">
        新页面返回数据：<span id="text"></span>
    </div>
</div>

</body>

<script>
    let text = document.getElementById('text')
    let btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
        let url = 'http://tidys.gitee.io/window-postmessage/postmessage.html'
        window.open(url);
        window.addEventListener('message', (event) => {
            console.warn(event)
            let data = JSON.stringify(event.data);
            text.innerText = data;
        }, false)
    })
    let vibrate = document.getElementById('vibrate');
    vibrate.addEventListener('click',()=>{
        window.navigator.vibrate(1000);
    });
</script>
</html>
